<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折叠菜单</title>
    <style>

        .level2 {
            overflow: hidden;
        }

    </style>
</head>
<body>

<div class="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none">衬衫</a>
            <ul class="level2">
                <li><a>衬衫1</a></li>
                <li><a>衬衫2</a></li>
                <li><a>衬衫3</a></li>
                <li><a>衬衫4</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2">
                <li><a>卫衣1</a></li>
                <li><a>卫衣2</a></li>
                <li><a>卫衣3</a></li>
                <li><a>卫衣4</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2">
                <li><a>裤子1</a></li>
                <li><a>裤子2</a></li>
                <li><a>裤子3</a></li>
                <li><a>裤子4</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
<script src="../../js/jquery-3.4.1.js"></script>
<script>

    $(function () {
        collapseMenuInit();
    });

    function collapseMenuInit() {
        $('.level1 > a').on("click", function () {
            /**
             * 说明:
             *      1. siblings: 获取兄弟节点;
             *      2. $(this).siblings().children('a'): 获取当前元素的兄弟节点的子节点中的a标签;
             *      3. parent: 获取当前节点的父节点;
             *      4. next: 获取下一个节点
             */
            $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
            return false;
        });
    }

</script>
</html>